<template>
    <view class="pub_page pub_login_other">
        <pub-head headerName="login_other" :headerConfig="headerConfig"></pub-head>
        <div class="page_box page_box_scroll" :style="{ 'height': `calc(100vh - ${headerHeight})` }">
            <div class="title">修改密码</div>
            <div class="inputs">
                <div class="li">
                    <input class="inp" v-model="phone" type="number" maxlength="11" placeholder="请输入账号"
                        placeholder-style="color:#bbb">
                </div>
                <div class="li li_2">
                    <input class="inp" v-model="code" type="number" maxlength="4" placeholder="请输入4位验证码"
                        placeholder-style="color:#bbb">
                    <div class="code_msg" @click="toSendCode">{{ code_msg }}</div>
                </div>
                <div class="li">
                    <input class="inp" v-model="password" password placeholder="请输入新密码" placeholder-style="color:#bbb">
                </div>
                <div class="li">
                    <input class="inp" v-model="password_confirm" password placeholder="再次确认新密码"
                        placeholder-style="color:#bbb">
                </div>
            </div>
            <div class="pub_btn pub_btn_big" @click="toFind">登录</div>
            <div class="rule">
                <div class="p_1">密码规则</div>
                <div class="p_2">1、长度6-16位</div>
                <div class="p_2">2、必须包含字母（大写或者小写）、数字，不能包含空格</div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '',//标题栏内容
            },
            headerHeight: getApp().globalData.headerHeight,
            openType: 1,//1忘记密码  2修改密码

            password: '',
            password_confirm: '',

            phone: '',
            code: '',
            code_msg: '获取验证码',
        };
    },
    onLoad() {
        // 支付宝小程序设置状态栏文字颜色
        this.$comFun.setZfbNavigationBar();
    },
    methods: {
        async toFind() {
            if (!this.$comFun.ValidateMobile(this.phone)) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code.length != 4) {
                this.$comFun.toast('请输入4位验证码');
                return;
            }
            if (this.password.length < 6 || !this.$comFun.ValidateNumAndLetter(this.password)) {
                this.$comFun.toast('请输入至少6位登录密码，必须包括数字和字母');
                return;
            }
            if (this.password != this.password_confirm) {
                this.$comFun.toast('两次密码不同');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.put('mobile/updatePwd', {
                phone: this.phone,
                code: this.code,
                password: this.password,
                password_confirm: this.password_confirm,
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                if (this.openType == 1) {
                    this.$comFun.toast('修改成功');
                    setTimeout(() => {
                        this.$comFun.closeWin();
                    }, 1000);
                } else {
                    this.$comFun.toast('修改成功，已退出登陆');
                    this.$comFun.clearUserInfo();
                }
            } else {
                this.$comFun.toast(res.msg);
            }
        },
        async toSendCode() {
            if (this.phone.length != 11) {
                this.$comFun.toast('请输入正确的手机号');
                return;
            }
            if (this.code_msg == '获取验证码') {
                this.$comFun.openLoading();
                const res = await this.$request.post('sms/sendUpdatePwdCode', {
                    phone: this.phone
                });
                // console.log(res);
                this.$comFun.closeLoading();
                if (res.code == 200) {
                    this.codeTime();
                } else {
                    this.$comFun.toast(res.msg);
                }
            }
        },
        codeTime() {
            this.code_msg = '剩 60 s';
            let count = 60;
            let time = setInterval(() => {
                if (count == 1) {
                    clearInterval(time);
                    this.code_msg = '获取验证码';
                    return;
                }
                count--;
                this.code_msg = '剩 ' + count + ' s';
            }, 1000);
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/login.scss";
</style>
